<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="org.gdpi.subject.entiry.Subject"%>
<%@ page import="org.gdpi.examTest.entiry.ExamTest"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Tables - Ace Admin</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/font-awesome.min.css" />
		<%-- <link href="${pageContext.request.contextPath }/static/assets/css/bootstrap-theme.css" rel="stylesheet"/> --%>

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace.min.css" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-part2.min.css" />
		<![endif]-->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="${pageContext.request.contextPath }/static/assets/js/ace-extra.min.js"></script>

		<!-- 手动给表单赋值 -->
		<script src="${pageContext.request.contextPath }/js/common/manualAssignment.js"></script>
		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="${pageContext.request.contextPath }/static/assets/js/html5shiv.min.js"></script>
		<script src="${pageContext.request.contextPath }/static/assets/js/respond.min.js"></script>
		<![endif]-->
		
		<style type="text/css">
			#sample-table-1 tbody tr td{
				white-space:nowrap;overflow:hidden;text-overflow: ellipsis;height:25px;
			}
		</style>
		<script type="text/javascript">
			var id;//删除试题的ID
			function _delete(uid){
				$("#deleteMsg").html("确定删除[<font color='red'>"+uid+"</font>]号考试试题吗?");
				id = uid;
				$('#myModal').modal({
					backdrop:'static'
				});
			}
			function _delete2(){
				window.location = "${pageContext.request.contextPath }/examTest/delete/"+id;
			}
			
			// 查看试题
			function _show(test_id){
				$.get(
					"${pageContext.request.contextPath}/examTest/show/"+test_id,
					function (data){
						console.log(data['examTest'])
						setValue(data)
					},
					'json'
				)
				$("#showTestModal").modal({
					backdrop:'static'
				})
			}
			
			// 添加试题
			function _addTest(){
				
				$("#addTestTitle").html("添加页面")
				$("#addTestForm").attr("action","add")
				$("#addTestButton").html("添加")
				$(".content").val("")
				$(".choose_a").val("")
				$(".choose_b").val("")
				$(".choose_c").val("")
				$(".choose_d").val("")
				
				$(".content").attr("placeholder","题干")
				$(".choose_a").attr("placeholder","选项A")
				$(".choose_b").attr("placeholder","选项B")
				$(".choose_c").attr("placeholder","选项C")
				$(".choose_d").attr("placeholder","选项D")
				
				$.get(
						"${pageContext.request.contextPath}/examTest/add",
						function (data){
							var exitSubs = data.subjectNames;
							var exitETTs = data.testType;
							var html_subjectNameOption = ""
							var html_testTypeOption = ""
							
							for(index=0,length=exitSubs.length;index<length;index++){
								html_subjectNameOption += "<option value='"+exitSubs[index].sub_id+"' selected='selected'>"+exitSubs[index].name+"</option>"
							}
							$("#subjectName").html(html_subjectNameOption);
							
							for(index=0,length=exitETTs.length;index<length;index++){
								html_testTypeOption += "<option value='"+exitETTs[index].id+"' selected='selected'>"+exitETTs[index].test_type+" &nbsp; "+exitETTs[index].test_type_score+"&nbsp;分</option>"
							}
							$("#selectType").html(html_testTypeOption)
							
							_change()	//答案选项自动选择多选或单选
						},
						'json'
					)
				$("#addTestModal").modal({
					backdrop:'static'
				})
			}
			
			/* 选择题类型改变事件  */
			function _change(){
				var selectTestName = $("#selectType option:selected").text().slice(0,3)
				var radio = "单选题";
				var checkbox = "多选题";
				$(".radioValue").prop("checked",false);
				$(".checkboxValue").prop("checked",false);
				if(selectTestName == radio){
					$("#radio").show();
					$("#checkbox").hide();
				}else if(selectTestName == checkbox){
					$("#checkbox").show();
					$("#radio").hide();
				}
			}
			
			// 修改试题
			function _edit(test_id){
				
				$("#addTestTitle").html("修改页面")
				$("#addTestForm").attr("action","edit/"+test_id)
				$("#addTestButton").html("修改")
				$.get(
					"${pageContext.request.contextPath}/examTest/edit/"+test_id,
					function (data){
						var exitSubs = data['subjectNames'];
						var exitETTs = data['testType'];
						var html_subjectNameOption = ""
						var html_testTypeOption = ""
						
						for(index=0,length=exitSubs.length;index<length;index++){
							if(data.examTest.subject.sub_id == exitSubs[index].sub_id){
								html_subjectNameOption += "<option value='"+exitSubs[index].sub_id+"' selected='selected'>"+exitSubs[index].name+"</option>"
							}else{
								html_subjectNameOption += "<option value='"+exitSubs[index].sub_id+"'>"+exitSubs[index].name+"</option>"
							} 
						}
						$("#subjectName").html(html_subjectNameOption);
						
						for(index=0,length=exitETTs.length;index<length;index++){
							if(data.examTest.examTestType.id == exitETTs[index].id){
								html_testTypeOption += "<option value='"+exitETTs[index].id+"' selected='selected'>"+exitETTs[index].test_type+" &nbsp; "+exitETTs[index].test_type_score+"&nbsp;分</option>"
							}else{
								html_testTypeOption += "<option value='"+exitETTs[index].id+"'>"+exitETTs[index].test_type+" &nbsp; "+exitETTs[index].test_type_score+"&nbsp;分</option>"
							}
						}
						$("#selectType").html(html_testTypeOption)
						_change()
						setValue(data)
					}
					,'json'
				)
				
				$("#addTestModal").modal({
					backdrop:'static'
				})
			}
		</script>
	</head>

	<body class="no-skin">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
	
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">Home</a>
				</li>
	
			</ul><!-- /.breadcrumb -->
	
			<!-- #section:basics/content.searchbox -->
			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon">
						<input type="text" placeholder="Search ${pageContext.request.contextPath }/static." class="nav-search-input" id="nav-search-input" autocomplete="off" />
						<i class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div><!-- /.nav-search -->
	
			<!-- /section:basics/content.searchbox -->
		</div>
	
		<!-- /section:basics/content.breadcrumbs -->
		<div class="page-content">
			<!-- #section:settings.box -->
			<div class="ace-settings-container" id="ace-settings-container">
				<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
					<i class="ace-icon fa fa-cog bigger-150"></i>
				</div>
	
				<div class="ace-settings-box clearfix" id="ace-settings-box">
					<div class="pull-left width-50">
						<!-- #section:settings.skins -->
						<div class="ace-settings-item">
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="no-skin" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>
	
						<!-- /section:settings.skins -->
	
						<!-- #section:settings.navbar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
							<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
						</div>
	
						<!-- /section:settings.navbar -->
	
						<!-- #section:settings.sidebar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
							<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
						</div>
	
						<!-- /section:settings.sidebar -->
	
						<!-- #section:settings.breadcrumbs -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
							<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
						</div>
	
						<!-- /section:settings.breadcrumbs -->
	
						<!-- #section:settings.rtl -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
							<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
						</div>
	
						<!-- /section:settings.rtl -->
	
						<!-- #section:settings.container -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
							<label class="lbl" for="ace-settings-add-container">
								Inside
								<b>.container</b>
							</label>
						</div>
	
						<!-- /section:settings.container -->
					</div><!-- /.pull-left -->
	
					<div class="pull-left width-50">
						<!-- #section:basics/sidebar.options -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" />
							<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
						</div>
	
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" />
							<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
						</div>
	
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" />
							<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
						</div>
	
						<!-- /section:basics/sidebar.options -->
					</div><!-- /.pull-left -->
				</div><!-- /.ace-settings-box -->
			</div><!-- /.ace-settings-container -->
	
			<!-- /section:settings.box -->
			<div class="page-content-area">
				<div class="page-header">
					<h1>
						功能
						<small>
							<i class="ace-icon fa fa-angle-double-right"></i>
							考试试题管理 &amp; 考试试题显示
						</small>
					</h1>
				</div><!-- /.page-header -->
	
				<c:if test="${not empty message}">
					<!-- 信息提示框 -->
					<div class="alert alert-success alert-dismissable">
					    <button type="button" class="close" data-dismiss="alert">&times;</button>
					    <strong>信息提示：</strong> ${message }
					 </div>
				</c:if>
	
				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="row">
							<div class="col-xs-12">
								<table id="sample-table-1" class="table table-striped table-bordered table-hover" style="table-layout: fixed;">
									<thead>
										<tr>
										</tr>
										
										<tr>
											<th>题号</th>
											<th>科目</th>
											<th>题干</th>
											<th>选项A</th>
											<th>选项B</th>
											<th>选项C</th>
											<th>选项D</th>
											<th>答案</th>
											<th>题型</th>
											<th>题目分数</th>
											<th><a href="javascript:_addTest()" class="glyphicon glyphicon-plus"></a></th>
										</tr>
									</thead>
	
									<tbody>
										<c:if test="${empty page.datas}">
											<h1>表数据为空!</h1>
										</c:if>
										<c:forEach items="${page.datas }" var="examTest">
										<tr>
											<td>
												<span>${examTest.id }</span>
											</td>
											<td>
												<span>${examTest.subject.name }</span>
											</td>
											<td>
												<span>${examTest.content }</span>
											</td>
											<td>
												<span>${examTest.choose_a }</span>
											</td>
											<td>
												<span>${examTest.choose_b }</span>
											</td>
											<td>
												<span>${examTest.choose_c }</span>
											</td>
											<td>
												<span>${examTest.choose_d }</span>
											</td>
											<td>
												<span>${examTest.answer }</span>
											</td>
											<td>
												<span>${examTest.examTestType.test_type }</span>
											</td>
											<td>
												<span>${examTest.examTestType.test_type_score }</span>
											</td>
											<td>
												<a href="javascript:_show('${examTest.id }')" class="glyphicon glyphicon-search"></a>&nbsp;&nbsp;
												<a href="javascript:_edit('${examTest.id }')" class="glyphicon glyphicon-edit"></a>&nbsp;&nbsp;
												<a href="javascript:_delete('${examTest.id }');" class="glyphicon glyphicon-trash"></a>&nbsp;&nbsp;
											</td>
										</tr>
										</c:forEach>
									</tbody>
								</table>
								
							</div><!-- /.span -->
						</div><!-- /.row -->
	
	
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.page-content-area -->
		</div><!-- /.page-content -->
		<!-- 分页  -->
		<div class="modal-footer no-margin-top">
			<jsp:include page="/jsp/Common/page.jsp">
			<jsp:param value="examTests" name="url"/>
			<jsp:param value="${page.totalSize}" name="items"/>
		</jsp:include>
		</div><!-- 分页结束 -->
			
		<!-- 删除Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Message</h4>
		      </div>
		      <div class="modal-body">
		    	<h3 id="deleteMsg">确定删除该考试试题吗</h3>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary" onclick="javascript:_delete2();">Delete</button>
		      </div>
		    </div>
		  </div>
		</div>


		<!-- 展示考题Modal -->
		<div class="modal fade" id="showTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">试题查看</h4>
		      </div>
		      <div class="modal-body">
		        <div class="row ">
		            <div class="col-md-12 "><h3>科目：<span class="show_subjectName"></span></h3></div>
		        </div>
		        <div class="row ">
		            <div class="col-md-12 "><h3>题干：<span class="show_content"></span></h3></div>
		        </div>
		        <div class="row ">
		            <div class="col-md-12 "><h4>A：<span class="show_choose_a"></span></h4></div>
		        </div>
		        <div class="row ">
		            <div class="col-md-12 "><h4>B：<span class="show_choose_b"></span></h4></div>
		        </div>
		        <div class="row ">
		            <div class="col-md-12 "><h4>C：<span class="show_choose_c"></span></h4></div>
		        </div>
		        <div class="row ">
		            <div class="col-md-12 "><h4>D：<span class="show_choose_d"></span></h4></div>
		        </div>
		        <div class="row ">
		            <div class="col-md-12 ">
		                <font color="red" size="5px">答案：<span class="show_answer"></span></font>
		            </div>
		        </div> 
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
		      </div>
		    </div>
		  </div>
		</div>


		<!-- 考试题添加Modal -->
		<div class="modal fade" id="addTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		    	<form:form action="add" method="post" class="form-horizontal" modelAttribute="examTest" id="addTestForm">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="addTestTitle">添加页面</h4>
			      </div>
			      <div class="modal-body">
		              <div class="form-group">
		                  <label class="col-sm-4 control-label">科目</label>
		                  <div class="col-sm-6">
		                      <form:select class="form-control" name="subject.sub_id" path="subject.sub_id" id="subjectName">
		                      	<%-- <option value="${sub.sub_id }" selected="selected">${sub.name }</option> --%>
		                      </form:select>
		                  </div>
		              </div>
	
	                  <div class="form-group">
	                      <label class="col-sm-4 control-label">试题类型</label>
	                      <div class="col-sm-6">
	                          <form:select class="form-control" name="test_typeID" onchange="javascript:_change();" id="selectType" path="examTestType.id" >
	                          	<%-- <option value="${Type.id }" selected="selected">${Type.test_type } &nbsp; ${Type.test_type_score }&nbsp;分</option> --%>
	                          </form:select>
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-4 control-label">题干</label>
	                      <div class="col-sm-6">
	                          <form:textarea class="form-control content" required="true" placeholder="题干" name="content" path="content"/>
	                          <form:errors path="content"></form:errors>
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-4 control-label">选项A</label>
	                      <div class="col-sm-6">
	                          <form:input type="text" class="form-control choose_a" required="true" placeholder="选项A" name="choose_a" path="choose_a"/>
	                          <form:errors path="choose_a"></form:errors>
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-4 control-label">选项B</label>
	                      <div class="col-sm-6">
	                          <form:input type="text" class="form-control choose_b" required="true" placeholder="选项B" name="choose_b" path="choose_b"/>
	                          <form:errors path="choose_b"></form:errors>
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-4 control-label">选项C</label>
	                      <div class="col-sm-6">
	                          <form:input type="text" class="form-control choose_c" required="true" placeholder="选项C" name="choose_c" path="choose_c"/>
	                          <form:errors path="choose_c"></form:errors>
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-4 control-label">选项D</label>
	                      <div class="col-sm-6">
	                          <form:input type="text" class="form-control choose_d"  required="true" placeholder="选项D" name="choose_d" path="choose_d"/>
	                          <form:errors path="choose_d"></form:errors>
	                      </div>
	                  </div>
	                  <div class="form-group">
	                      <label class="col-sm-4 control-label">答案</label>
	                       <div class="col-sm-6" style="padding-top: 6px;" id="radio">
	                          <form:radiobutton  value="A" path="answer" name='answer' class="radioValue answer answer_a"/>A
	                       	  <form:radiobutton  value="B" path="answer" name='answer' class="radioValue answer answer_b"/>B
	                          <form:radiobutton  value="C" path="answer" name='answer' class="radioValue answer answer_c"/>C
	                          <form:radiobutton  value="D" path="answer" name='answer' class="radioValue answer answer_d"/>D
	                          <form:errors path="answer" style="color:red;"></form:errors>
	                      </div>
	                      <div class="col-sm-6" style="padding-top: 6px;display:none;" id="checkbox">
	                          <form:checkbox  value="A" path="answer" name='answer' class="checkboxValue answer answer_a"/>A
	                       	  <form:checkbox  value="B" path="answer" name='answer' class="checkboxValue answer answer_b"/>B
	                          <form:checkbox  value="C" path="answer" name='answer' class="checkboxValue answer answer_c"/>C
	                          <form:checkbox  value="D" path="answer" name='answer' class="checkboxValue answer answer_d"/>D
	                          <form:errors path="answer" style="color:red;"></form:errors>
	                      </div> 
	                  </div>
			      </div>
			      <div class="modal-footer">
			        <button type="submit" class="btn btn-primary" id="addTestButton">添加</button>
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
		       </form:form>
		    </div>
		  </div>
		</div>
		
	</body>
</html>
